<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/echarts.js"></script>
    <script src="../lib/d3.js"></script>
</head>
<body>
<div id="main" style="height:500px;width: 100%; margin-left: 0px;float: left;"></div>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="http://echarts.baidu.com/doc/example/timelineOption.js"></script>
<script type="text/javascript" src="../lib/d3v4.js"></script>
<script type="text/javascript">
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
        [
            'echarts',
            'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
            'echarts/chart/bar'
        ],
        function (ec) {
            //get the city data
//           data = {};
            d3.json("../data/AirPM/2017-03-15/2017-03-15-all.json",function (error,root) {
                if(error)
                    console.error(error);
                console.log(root);
            });
//            console.log(data);
//
            console.log(dataMap.dataGDP['2002']);




            var myChart = ec.init(document.getElementById('main'));
            option = {
                timeline:{
                    data:[
                       '03-15','04-15','04-23'
                    ],
                    label : {
                        formatter : function(s) {
                            return s.slice(0, 4);
                        }
                    },
                    autoPlay : true,
                    playInterval : 1000
                },
                options:[
                    {
                        title : {
                            'text':'hahah',
                            'subtext':'AQI'
                        },
                        tooltip : {'trigger':'axis'},
                        legend : {
                            x:'right',
                            'data':['AQI'],
                            'selected':{
                                'AQI':true,

                            }
                        },
                        toolbox : {
                            'show':true,
                            orient : 'vertical',
                            x: 'right',
                            y: 'center',
                            'feature':{
                                'saveAsImage':{'show':true}
                            }
                        },
                        calculable : true,
                        grid : {'y':80,'y2':100},
                        xAxis : [{
                            'type':'category',
                            'axisLabel':{'interval':0},
                            'data':[
                                '香港',
                                '\n台北',
                                '上海',
                                '\n北京',
                                '深圳',
                                '\n广州',
                                '澳门',
                                '\n天津',
                                '南京',
                                '\n武汉',
                                '杭州',
                                '\n重庆',
                                '苏州',
                                '\n大连',
                                '东莞',
                                '\n沈阳',
                                '成都',
                                '\n青岛',
                                '厦门',
                                '\n佛山',
                                '济南',
                                '\n哈尔滨',
                                '西安',
                                '\n昆明',
                                '无锡',
                                '\n福州',
                                '宁波',
                                '\n珠海',
                                '中山',
                                '\n长沙',
                                '长春',
                                '\n温州',
                                '合肥',
                                '\n郑州',
                                '石家庄',
                                '\n海口',
                                '惠州',
                                '\n常州',
                                '大庆',
                                '\n南昌',
                                '绍兴',
                                '\n南通',
                                '烟台',
                                '\n太原',
                                '贵阳',
                                '\n兰州',
                                '南宁',
                                '\n嘉兴',
                                '威海',
                                '\n泉州',
                                '拉萨',
                                '\n乌鲁木齐',
                                '呼和浩特',
                                '\n包头'
                            ]
                        }],
                        yAxis : [
                            {
                                'type':'value',
                                'name':'次数',
                                'max':20000
                            },

                        ],
                        series : [
                            {
                                'name':'AQI',
                                'type':'bar',
                                'data':[{
                                    "value": "490",
                                    "name": "宁波"

                                }]
                            }
                        ]
                    },
                    {
                        title : {'text':'2003全国宏观经济指标'},
                        series : [
                            {'data': dataMap.dataGDP['2003']},


                        ]
                    },
                    {
                        title : {'text':'2004全国宏观经济指标'},
                        series : [
                            {'data': dataMap.dataGDP['2004']},


                        ]
                    },
                    {
                        title : {'text':'2005全国宏观经济指标'},
                        series : [
                            {'data': dataMap.dataGDP['2005']},
                        ]
                    }
                ]
            };


            myChart.setOption(option);


            d3.select("canvas").style("opacity",0)
                .transition()
                .duration(1000)
                .style("opacity",1);

        }
    );

</script>

</body>
</html>
</body>
</html>